﻿<link href="/Scripts/src/style/formSelects-v4.css" type="text/css" />
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-collapse" lay-accordion="">
                        <div class="layui-colla-item">
                            <!--搜索区域-->
                            <h2 class="layui-colla-title">筛选查询</h2>
                            <div class="layui-colla-content layui-show">
                                <div class="layui-card">
                                    <form class="layui-form" lay-filter="SearchForm" id="SearchForm" autocomplete="off">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label">抬头：</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name='Title' placeholder='抬头' class="layui-input">
                                                </div>
                                            </div><div class="layui-inline">
                                                <label class="layui-form-label">修改时间:</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" class="layui-input" name='sModifyOn' id="sModifyOn" placeholder="yyyy-MM-dd">
                                                </div>
                                            </div> <div class="layui-inline">
                                                <label class="layui-form-label">用户名：</label>
                                                <div class="layui-input-inline">
                                                    <input type="text" name='UserName' placeholder='用户名' class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline">
                                                <label class="layui-form-label"></label>

                                                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="Search">搜索</button>
                                                <button class="layui-btn layui-btn-primary" id="Reset">重置</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-card">
                <div class="layui-card-body">
                    <a class="layui-btn" id="add" onclick="Add(null);">新增</a>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="ExportExcel();">导出</button>
                    <a class="layui-btn  layui-btn-danger" id="delAll" onclick="DelAll()">批量删除</a>
                    <div style="margin-top: 10px;" id="AutoTablediv">
                        <!-- 加载列表 -->
                        <table class="layui-hide" style="width:100%" id="ListTable" lay-filter="ListTable"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="layui-card" id="EditOrAddHtml" style="display:none;height:700px;overflow:auto">
    <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" lay-filter="AddForm" id="AddForm" autocomplete="off">

            <div>
                <h1>完整demo</h1>
                <script id="editor" type="text/plain" style="width:1024px;height:500px;">
                </script>
            </div>

            <div id="btns">
                <div>
                    <button onclick="getAllHtml()">获得整个html的内容</button>
                    <button onclick="getContent()">获得内容</button>
                    <button onclick="setContent()">写入内容</button>
                    <button onclick="setContent(true)">追加内容</button>
                    <button onclick="getContentTxt()">获得纯文本</button>
                    <button onclick="getPlainTxt()">获得带格式的纯文本</button>
                    <button onclick="hasContent()">判断是否有内容</button>
                    <button onclick="setFocus()">使编辑器获得焦点</button>
                    <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
                    <button onmousedown="setblur(event)">编辑器失去焦点</button>

                </div>
                <div>
                    <button onclick="getText()">获得当前选中的文本</button>
                    <button onclick="insertHtml()">插入给定的内容</button>
                    <button id="enable" onclick="setEnabled()">可以编辑</button>
                    <button onclick="setDisabled()">不可编辑</button>
                    <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
                    <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
                    <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
                </div>

                <div>
                    <button onclick="getLocalData()">获取草稿箱内容</button>
                    <button onclick="clearLocalData()">清空草稿箱</button>
                </div>

            </div>
            <div>
                <button onclick="createEditor()">
                    创建编辑器
                </button>
                <button onclick="deleteEditor()">
                    删除编辑器
                </button>
            </div>     
            <!--<input type="hidden" name="ID" class="layui-input">
    <div class="layui-form-div">-->
            <!--弹框编辑区-->
            <!--<div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>抬头:</label>
            <div class='layui-input-inline'>
                <input type='text' name='Title' class='layui-input' placeholder="请输入抬头" lay-verify='required'>
            </div>
        </div> <div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>用户编号:</label>
            <div class='layui-input-inline'>
                <input type='text' name='UserNo' class='layui-input' placeholder="请输入用户编号" lay-verify='required'>
            </div>
        </div> <div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>备注:</label>
            <div class='layui-input-inline'>
                <input type='text' name='Remarks' class='layui-input' placeholder="请输入备注" lay-verify='required'>
            </div>
        </div> <div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>类型:</label>
            <div class='layui-input-inline'>
                <input type='text' name='Type' class='layui-input' placeholder="请输入类型" lay-verify='required'>
            </div>
        </div> <div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>用户名:</label>
            <div class='layui-input-inline'>
                <input type='text' name='UserName' class='layui-input' placeholder="请输入用户名" lay-verify='required'>
            </div>
        </div> <div class='layui-form-item'>
            <label class='layui-form-label'><span style='color: red; '>*</span>IP地址:</label>
            <div class='layui-input-inline'>
                <input type='text' name='IPAddress' class='layui-input' placeholder="请输入IP地址" lay-verify='required'>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="text-align:center;">
        <button class="layui-btn" lay-filter="Save" id="save" lay-submit>保存</button>
        <button class="layui-btn layui-btn-primary" type="button" id="Cancel">取消</button>
    </div>-->
        </form>
    </div>
</div>
<script src="/Scripts/common.js?v=4"></script>
<script   src="/Scripts/src/ueditor/ueditor.config.js"></script>
<script   src="/Scripts/src/ueditor/ueditor.all.min.js"></script>
<script>
    var form
    var table
    //接收table 列数组
    var colArry = [{ checkbox: true }, { "field": "Title", "title": "抬头", "align": "center", "hide": false }, { "field": "UserNo", "title": "用户编号", "align": "center", "hide": true }, { "field": "Remarks", "title": "备注", "align": "center", "hide": false }, { "field": "Type", "title": "类型", "align": "center", "hide": true }, { "field": "ModifyOn", "title": "修改时间", "align": "center", "hide": true }, { "field": "UserName", "title": "用户名", "align": "center", "hide": false }, { "field": "ModifyBy", "title": "修改人", "align": "center", "hide": true }, { "field": "CreatedBy", "title": "创建人", "align": "center", "hide": true }, { "field": "CreatedOn", "title": "创建时间", "align": "center", "hide": true }, { "field": "IPAddress", "title": "IP地址", "align": "center", "hide": false }, { "field": "ID", "title": "id", "align": "center", "hide": true }]
    //日期条件是否是日期区间
    var isDateRange = false
    //查询日期控件id 数组
    var dateList = ["#sModifyOn"]
    //编辑区日期控件ids数组
    var editDateIds = ""
    //多选下拉空间ids数组
    var formSelectsIds = ""

    //获取列表地址
    var getUrl = "/AutoTest/GetList"
    //删除地址
    var delUrl = "/AutoTest/Delete?ID="

    //弹框中保存地址
    var saveUrl = "/AutoTest/SaveOrEdit"

    // 导出Excel
    var exportExcelUrl = "/AutoTest/ExportExcel"

    // 批量删除
    var delallUrl = "/AutoTest/DelAll"


    var ue = UE.getEditor('editor');


    function isFocus(e) {
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e) {
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
        return false
       
    }

    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
        return false
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
        return false
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
        return false
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
        return false
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
        return false
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData() {
        alert(UE.getEditor('editor').execCommand("getlocaldata"));
    }

    function clearLocalData() {
        UE.getEditor('editor').execCommand("clearlocaldata");
        alert("已清空草稿箱")
    }


    layui.use(['laydate', 'table', 'form', 'formSelects'], function () {
        var laydate = layui.laydate,
            form = layui.form,
            table = layui.table,
            formSelects = layui.formSelects;

        form.render("select");

        //执行一个laydate实例 日期
        if (!isDateRange) {
            for (var index = 0; index < dateList.length; index++) {
                laydate.render({
                    elem: dateList[index] //指定元素
                });
            }
        } else {
            // 日期范围
            for (var index = 0; index < dateList.length; index++) {
                laydate.render({
                    elem: 'input[name="' + dateList[index] + '"]',
                    type: 'date',
                    range: true
                });
            }
        }

        // 多选实例
        for (var index = 0; index < formSelectsIds.length; index++) {
            formSelects.data(formSelectsIds[index], 'local', {
                arr: [
                    { "name": "文本1", "value": 1 },
                    { "name": "文本2", "value": 2 },
                    { "name": "文本3", "value": 3 }
                ]
            });
        }

        //重置
        $(document).on('click', '#Reset', function () {
            $('#SearchForm')[0].reset();
            form.render(null, 'SearchForm');
            return false;
        });
        //查询
        form.on('submit(Search)', function (data) {

            //执行重载
            table.reload(tableId, {
                page: {
                    curr: 1 //重新从第 1 页开始

                },
                where: data.field
            }, 'data');

            return false;

        });
        tableId = "ListTable";

        InitTable(colArry);

        function InitTable(arry) {

            var obj1 = new Object()
            obj1.title = "操作"
            obj1.align = "center"
            obj1.templet = function (d) { var html = ''; html += '<a class=\"layui-btn layui-btn-xs\" lay-event=\"edit\" style=\"margin-right: 10px; display:none;\">编辑</a>'; html += '<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\" style=\"margin-right: 10px; display:none;\"> 删除</a>'; return html; }
            arry.push(obj1)

            //列表 初始化
            table.render({
                elem: '#' + tableId,
                url: getUrl,
                method: 'post',
                headers: setTableHeader(),
                contentType: "application/json",
                dataType: "json",
                cols: [
                    arry
                ],
                page: true,
                where: {
                    dt: new Date()
                },
                height: '600px',
                even: true, //隔行背景
                done: function (res, curr, count) {
                    GetInterfaceButton(); //设置当前页面按钮权限
                }
            });
        }


        table.on('tool(' + tableId + ')', function (obj) {

            if (obj.event == "edit") {
                Add(obj.data);
            }
            else if (obj.event == "del") {
                layer.confirm("是否删除该记录？", {
                    btn: ['确认', '取消']
                }, function () {
                    ajax(delUrl + obj.data.ID, "post", "Json", {}, function (res) {
                        if (res.code == 0) {
                            obj.del();
                            layer.msg('删除成功！', {
                                icon: 1
                            });
                        }
                    });
                }, function (index) {
                    layer.close(index);
                });
            }
        });
    });
    var pageIndex;
    //新增弹框
    function Add(data) {
        layui.use(
            ["layer", "form", "jquery", "upload", "table", "laydate"],
            function () {
                var form2 = layui.form
                var laydate = layui.laydate;
                var table2 = layui.table
                pageIndex = layer.open({
                    type: 1,
                    title: "编辑",
                    content: $("#EditOrAddHtml"),
                    area: ['700px', 'auto'],

                    success: function (layero, dIndex) {
                        $(layero).children(".layui-layer-content").css("overflow", "visible").css("height", "auto");
                        //先清空
                        $('#AddForm')[0].reset();
                        form2.val("AddForm", data);
                        for (var index = 0; index < editDateIds.length; index++) {
                            laydate.render({
                                elem: editDateIds[index] //指定元素
                            });
                        }
                        if (data == null) {
                            //如果是新增，则重置form
                            document.getElementById("AddForm").reset(); //
                        }
                        form2.render(); // 更新AddTestPaperForm内的所有表单状态
                        var mask = $(".layui-layer-shade");
                        mask.appendTo(layero.parent());
                    },
                    cancel: function () {
                        $("#EditOrAddHtml").css("display", "none")
                    }

                });
                //保存
                form2.on('submit(Save)', function (data) {

                    var bodyDat = JSON.stringify(data.field)

                    //此区域发送网络请求 把数据提交到后台  刷新列表  return false 结束
                    ajax(saveUrl, "post", "json", bodyDat, function (res) {
                        if (res.code == 0) {
                            $("#EditOrAddHtml").css("display", "none")
                            table2.reload(tableId,
                                {
                                    where: {
                                        dt: new Date()
                                    }
                                });
                            layer.close(pageIndex)
                        }
                    }, "application/json");

                    return false;
                })
                //取消
                $(document).on("click", "#Cancel", function () {
                    $("#EditOrAddHtml").css("display", "none")
                    layer.close(pageIndex);
                });
            })
    }

    function ExportExcel() {
        ajax(exportExcelUrl, "post", "json", JSON.stringify($("#SearchForm").serializeObject()), function (
            res) {
            if (res.data == "") {
                layer.msg("数据为空！");
                return false;
            }
            window.open("../" + res.data);

            layer.msg("导出成功！", {
                icon: 1
            });
        }, "application/json", true);
    }

    function DelAll() {
        var checkStatus = layui.table.checkStatus(tableId).data;

        if (checkStatus.length == 0) {
            layer.msg("请勾选要删除的项！");
            return false;
        }
        var ids = new Array();
        for (var i = 0; i < checkStatus.length; i++) {
            ids.push(checkStatus[i].ID);
        }
        layer.confirm("是否删除？", {
            btn: ['确认', '取消']
        }, function () {
            ajax(delallUrl, "post", "Json", JSON.stringify(ids), function (res) {
                if (res.code == 0) {
                    layer.msg('删除成功！', {
                        icon: 1
                    });
                    layui.table.reload(tableId, {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }, 'data');
                }
            }, "application/json", true);
        }, function (index) {
            layer.close(index);
        });
    }</script>
